<template>
  <view class="container">
    <navbar title="订单详情"></navbar>
    <view class="header"></view>
    <view class="body">
      <view class="content" style="margin-top: 20rpx;">
        <view class="item1">
          <view class="item-issue-time1">发布时间：{{userDetail.createTime}}</view>
          <view class="item-box1">
            <view class="image-box">
              <view class="upload-image" v-if="userDetail?.image?.length">
                <image v-for="img in userDetail.image" :key="img" :src="baseImageUrl + img">
                </image>
              </view>
              <image v-else src="/static/images/image172@2x.png" mode=""></image>
            </view>
            <view class="contact-people">
              <text>联系人：{{userDetail.userName || '暂无'}}</text>
              <text>联系电话：{{userDetail.phone || '暂无'}}</text>
              <text>车辆类型：{{userDetail.carType || '暂无'}}</text>
              <text>能去的国家：{{userDetail.crossCountry || '暂无'}}</text>
              <text>能去的城市：{{userDetail.crossCity || '暂无'}}</text>
              <text>目前车辆所在地：{{userDetail.carAddress || '暂无'}}</text>
              <text> 备注：{{userDetail.remark || '暂无'}}</text>
            </view>

          </view>
        </view>
      </view>
      <view class="footer" style="margin-top: 140rpx;">
        <FooterBottom @onclick="gotoContact" v-if="isShowPhone" :title="'拨打 ' + userDetail.phone"></FooterBottom>
        <FooterBottom @onclick="onClickContact" v-else title="解锁联系方式"></FooterBottom>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        targetUserId: '',
        id: '',
        userDetail: {},
        isShowPhone: false,
        baseImageUrl: uni.gRequest.file,
      };
    },
    onLoad({
      id
    }) {
      if (id) {
        this.id = id
      }
      this.getUserDetail(this.id)
    },
    methods: {
      async getUserDetail(id) {
        const res = await uni.gRequest.get(`/app/demand/${id}`)
        this.userDetail = res.data || {}
        if (this.userDetail.image) {
          this.userDetail.image = this.userDetail.image.split(',')
        }
        this.targetUserId = res.data.userId
        this.isShowPhone = res.data.showFlag == 1
      },
      // 拨打电话
      gotoContact() {
        uni.makePhoneCall({
          phoneNumber: this.userDetail.phone + '',
        })
      },
      // 点击解锁联系方式
      onClickContact() {
        uni.showModal({
          title: '温馨提示',
          content: '获得联系方式需要付费解锁哦~',
          cancelColor: '#666666',
          confirmText: '立即付费',
          confirmColor: '#347DFD',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: `/pages/order_pay/order_pay?targetUserId=${this.targetUserId}&id=${this.id}&origin=4`
              })
            }
          }
        })
      },
      callNumber() {
        uni.makePhoneCall({
          phoneNumber: 19639039090,
          success: () => {
            console.log('拨打电话成功！');
          },
          fail: () => {
            console.error('拨打电话失败！');
          }
        })
      },


    },
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .container {
    height: 100%;
  }

  .header {
    height: 170rpx;
    background-color: #fff;
  }

  .body {
    padding: 30rpx;
    margin-top: -50rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-color: #FFF;
  }

  .tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: #666666;
      padding: 20rpx 0;

      &.active {
        color: #347DFD;
        ;
      }
    }
  }

  .item1 {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;


    .item-issue-time1 {
      padding: 0 0 20rpx;
      border-bottom: 1rpx #999 dotted;
    }

    .item-box1 {
      padding-top: 10rpx;

      image {
        width: 387rpx;
        height: 232rpx;
        display: block;
        margin: 0 auto;
      }

      .upload-image {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;

        image {
          width: 200rpx;
          height: 170rpx;
          display: inline;
          margin: 5rpx;

        }

      }
    }

    .item-box1-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      padding-top: 10rpx;

      .box1-user-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 32rpx;
        color: #000000;

        image {
          width: 60rpx;
          height: 60rpx;
          margin-right: 20rpx;
        }
      }

      .box1-user-right {
        font-size: 26rpx;
        color: #E14628;
        padding-right: 10rpx;
      }
    }

    .contact-people {
      padding-top: 10rpx;

      text {
        display: block;
        padding: 10rpx 0;
        font-size: 26rpx;
        color: #000000;
      }
    }

    .middle-image {
      width: 15rpx;
      height: 25rpx;
      margin-left: 13rpx
    }

    .item-main1 {
      font-size: 26rpx;
      color: #000000;
      display: flex;
      align-items: center;
      padding: 15rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      .item-userinfo1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 20rpx;
        color: #999999;

        text:first-child {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }
</style>
